<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>


<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
var delay = 1500; // la velocidad de las transiciones
var start_frame = 0; // comienza con la primera imagen

// esta es la función qu ejecuta las transiciones cada cierto tiempo
function start_slideshow(delay) {
setTimeout(fadeInOut(delay), delay);
}

// la función de las transiciones usando el efecto Appear se aplica a una lista cuyo ID es slide-images
function fadeInOut(delay) {
return(function() {
lis = $$('#slide-images>li');
new Effect.Appear(lis[1], { duration: 2, afterFinish: function(obj) {
lisFade = lis[0].remove();
lisFade.hide();
$('slide-images').appendChild(lisFade);
start_slideshow(delay);
}});
})
}

// todo se ejecuta cuando se termina de cargar la página
Event.observe(document, 'dom:loaded', function() {
var lis = $$('#slide-images>li');
if(lis.length > 1) for(i = 1; i < lis.length; i++) lis[i].hide();
});
Event.observe(window, 'load', function() {
if($$('#slide-images>li').length > 1) start_slideshow(delay);
});
//]]>
</script>

<style type='text/css'>
#slideshowDEMO { /* es el DIV contenedor que dimensionamos y centramos */
height: 300px;
margin: 0 auto;
width: 400px;
}
#slide-images { /* es la lista con las imágenes */
display: block;
height: 300px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 400px;
}
#slide-images li { /* cada item de la lista */
display: block;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#slide-images li img { /* cada imagen */
display: block;
height: 300px;
width: 400px;
}
</style>

</head>

<body>

<div id="slideshowDEMO">
<ul id="slide-images">
<li><img src="imagenes/home-001.jpg" /></li>
<li><img src="imagenes/home-002.jpg" /></li>
<li><img src="imagenes/home-003.jpg" /></li>
<!-- seguimos poniendo tantas imágenes como se nos ocurra -->
</ul>
</div>

</body>
</html>
